import type { Course } from '../types/index';
import { Star, Clock, Eye } from 'lucide-react';
import { Link } from 'react-router-dom';

interface CourseCardProps {
  course: Course;
}

export function CourseCard({ course }: CourseCardProps) {
  return (
    <div className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
      <div className="p-4">
        <h3 className="text-lg font-semibold text-gray-900 mb-2">{course.title}</h3>
        <p className="text-sm text-gray-600 mb-3 line-clamp-2">{course.description}</p>
        
        <div className="flex items-center justify-between mb-3">
          <span className="text-sm bg-blue-100 text-blue-800 px-2 py-1 rounded">
            {course.category}
          </span>
          <span className="text-lg font-bold text-blue-600">
            ¥{course.price}
          </span>
        </div>

        <div className="flex items-center space-x-4 text-sm text-gray-500">
          <div className="flex items-center space-x-1">
            <Star size={14} className="text-yellow-400" />
            <span>{course.rating}</span>
          </div>
          <div className="flex items-center space-x-1">
            <Clock size={14} />
            <span>{course.duration}小时</span>
          </div>
          <div className="flex items-center space-x-1">
            <Eye size={14} />
            <span>{course.viewCount}</span>
          </div>
        </div>

        <Link
          to={`/courses/${course.id}`}
          className="mt-4 block w-full text-center bg-blue-600 text-white py-2 rounded hover:bg-blue-700"
        >
          查看详情
        </Link>
      </div>
    </div>
  );
}